<template>
    <Layout title="璇玑智能采购系统" :showHome="false">
        <div>
            <!--   <van-swipe  :autoplay="2000" indicator-color="#fe5b02" style= " height:220px; "  > -->
            <van-swipe :autoplay="2000" indicator-color="#fe5b02" style="height: 220px">
                <van-swipe-item>
                    <div ref="pieChartNode" class="chart-box"></div>
                </van-swipe-item>
                <van-swipe-item>
                    <div ref="lineChartNode" class="chart-box"></div>
                </van-swipe-item>
            </van-swipe>
        </div>

        <div class="home-func" v-for="_item in menu" :key="_item.id">
            <header>{{ _item.name }}</header>
            <section>
                <div class="item" v-for="child in _item.children" :key="child.id">
                    <!-- 使用v-html来渲染字体图标 -->
                    <i class="pl" v-html="child.icon" @click="toPage(child)"  ></i>
                    <span>{{ child.name }}</span>
                </div>
            </section>
        </div>
    </Layout>
</template>
<script>
import { getCollectApi, getPaymentApi } from "../../apis/homeApi";
import renderLine from "./renderLine";
import echarts from "echarts";

 // 引入静态资源文件
import {menuIcon} from '../../config/common'

//找出所有子集的id，cp到id这里，作为属性值
/* const menuIcon = [
  { id: "PROJECT-01-01", icon: "&#xe73f;" },
  { id: "PROJECT-01-02", icon: "&#xe741;" },
  { id: "PURCHASE-01-01", icon: "&#xe742;" },
  { id: "PURCHASE-01-02", icon: "&#xe74b;" },
  { id: "RECEIVING-01-01", icon: "&#xe74d;" },
  { id: "RECEIVING-01-02", icon: "&#xe753;" },
  { id: "SYSTEM-01-01", icon: "&#xe754;" },
  { id: "SYSTEM-01-02", icon: "&#xe755;" },
  { id: "SYSTEM-01-04", icon: "&#xe75c;" },
  { id: "SYSTEM-01-05", icon: "&#xe75d;" },
  { id: "SYSTEM-01-06", icon: "&#xe76c;" }
] */
export default {
    mixins: [renderLine],

    data() {
        return {
            paymentList: [],
            menu: [],
        };
    },

    created() {
        if (this.menuList.length < 1) {
            this.$store.dispatch("common/menuAndRoleAct", this.userInfo.role);
        }
    },

    computed: {
        userInfo: function () {
            return this.$store.getters["common/userInfo"];
        },

        menuList() {
            return this.$store.getters["common/menuList"];
        },

        roleList() {
            return this.$store.getters["common/roleList"];
        },
    },

    watch: {
        menuList: {
            immediate: true,
            handler(value) {
                if (value.length > 0) {
                    // 临时工 temp
                    let temp = value.filter((val) => {
                        return !val.parentId && val.id !== "HOME-01";
                    });

                    this.menu = temp.map((item) => {
                        (item.children = value.filter((_val) => {
                            return _val.parentId === item.id;
                        })),
                            item.children.map((it) => {
                                it.icon = menuIcon.find((_it) => _it.id === it.id).icon;
                                return it;
                            });
                        return item;
                    });
                 
                }
            },
        },
    },

    async mounted() {
        // 饼图
        const piechart = echarts.init(this.$refs.pieChartNode);

        let result = await getPaymentApi();
        //  console.log(result)

        if (result.code === 200) {
            this.paymentList = result.data;
        }

        this.loopRenderPiechart(piechart);

        //折线图
        this.lineChart = echarts.init(this.$refs.lineChartNode);

        let lineRes = await getCollectApi();
        console.log(lineRes);
        if (result.code === 200) {
            this.lineList = lineRes.data;
        }

        this.renderLineChart();
    },

    methods: {
        loopRenderPiechart(piechart, index = 0) {
            //date: '2020-12-01', paid: 14568, payable: 43468, total: 72545
            let item = this.paymentList[index];
            let option = {
                color: ["#fe5b02", "#999", "#fe5b02", "#999"],
                title: [
                    {
                        text: item.paid + "元",
                        x: "25%",
                        y: "32%",
                        textAlign: "center",
                        textStyle: {
                            fontSize: "28",
                            fontWeight: "100",
                            color: "#fe5b02",
                            textAlign: "center",
                        },
                    },
                    {
                        text: "已付",
                        left: "25%",
                        top: "48%",
                        textAlign: "center",
                        textStyle: {
                            fontSize: "16",
                            fontWeight: "400",
                            color: "#fe5b02",
                            textAlign: "center",
                        },
                    },
                    {
                        text: item.date,
                        left: "25%",
                        top: "57%",
                        textAlign: "center",
                        textStyle: {
                            fontSize: "12",
                            fontWeight: "400",
                            color: "rgba(65,63,112,1)",
                            textAlign: "center",
                        },
                    },
                    {
                        text: item.payable + "元",
                        x: "75%",
                        y: "32%",
                        textAlign: "center",
                        textStyle: {
                            fontSize: "28",
                            fontWeight: "100",
                            color: "#fe5b02",
                            textAlign: "center",
                        },
                    },
                    {
                        text: "未付",
                        left: "75%",
                        top: "48%",
                        textAlign: "center",
                        textStyle: {
                            fontSize: "16",
                            fontWeight: "400",
                            color: "#fe5b02",
                            textAlign: "center",
                        },
                    },
                    {
                        text: item.date,
                        left: "75%",
                        top: "57%",
                        textAlign: "center",
                        textStyle: {
                            fontSize: "12",
                            fontWeight: "400",
                            color: "rgba(65,63,112,1)",
                            textAlign: "center",
                        },
                    },
                ],

                series: [
                    {
                        type: "pie",
                        radius: ["60%", "70%"],
                        center: ["25%", "50%"],
                        avoidLabelOverlap: false,

                        itemStyle: {
                            borderRadius: 10,
                            boederColor: "#fff",
                            borderwidth: 2,
                        },
                        label: {
                            show: false,
                        },

                        labelLine: {
                            show: false,
                        },

                        data: [{ value: item.paid }, { value: item.total }],
                    },
                    {
                        type: "pie",
                        radius: ["60%", "70%"],
                        center: ["75%", "50%"],
                        avoidLabelOverlap: false,

                        itemStyle: {
                            boederColor: "#fff",
                            borderwidth: 2,
                        },
                        label: {
                            show: false,
                        },

                        labelLine: {
                            show: false,
                        },

                        data: [{ value: item.paid }, { value: item.total }],
                    },
                ],
            };

            piechart.setOption(option);
            // 长轮询的使用
            setTimeout(() => {
                //  如果当前index 的值为 最后一个值，这重新取第一条数据，否则自增长 1
                index = index >= this.paymentList.length - 1 ? 0 : index + 1;
                this.loopRenderPiechart(piechart, index);
            }, 1000);
        },

        toPage(item){

         //   console.log(item)
               //  computed里的东西直接用
               //根据id拿到拿到自己的权限
            let  myRole = this.roleList.find(it =>{

                return  it.id ===  item.id
            })
                    
            // 当前页面跳转需要的权限
            let  nowRole =  menuIcon.find((it)=>{
                return   it.id  ===   item.id
            }).right

              
           //数组的includes方法 数据包含

           if( !!myRole && myRole.role.includes(nowRole)){
                this.$router.push(item.path)
           }else{
            this.$toast.fail(`你暂时没有【${item.name}】的功能权限，请联系管理员`)
           }

        }
    },
};
</script>

<style   lang="less" scoped>
@import "../../style/common.less";

.chart-box {
    display: block;
    height: 100%;
}

.home-func {
    display: block;
    position: relative;
    margin: 16px;
    background-color: @cf;

    >header {
        display: block;
        position: relative;
        height: 36px;
        padding: 4px 12px;
        font-size: 0.8rem;
        color: @primary;
        line-height: 27px;
        border-bottom: solid 1px #ddd;

        &::before {
            content: "";
            display: inline-block;
            vertical-align: bottom;
            width: 3px;
            height: 100%;
            margin-right: 8px;
            background-color: @primary;
        }
    }

    >section {
        display: block;
        .clear();

        >.item {
            float: left;
            width: 25%;
            margin-bottom: 8px;

            i {
                display: block;
                width: 48px;
                height: 48px;
                margin: auto;
                //字体图标样式
                font-family: "iconfont";
                font-size: 36px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                /* background-position: center;
                  background-size: 36px;
                  background-repeat: no-repeat; */

                /* &.pl{
                     background-image: url(../../images/home/product-list.png);
                  } */
            }

            span {
                display: block;
                font-size: 0.7rem;
                line-height: 20px;
                text-align: center;
                color: @primary;
            }
        }
    }
}
</style>